<template>
   <div>
      <Header>
         购物车
         <template #right>
            <span @click="clear">清空</span>
         </template>
      </Header>
      <Card></Card>
      <CarMore></CarMore>
      <CarSubmit></CarSubmit>
   </div>
</template>
<script lang='ts' setup>
import Header from '@/components/Header.vue';
import Card from '@/components/Card.vue';
import CarSubmit from '@/components/CarSubmit.vue';
import CarMore from '@/components/CarMore.vue';
import { card, removeAll } from '@/service/api';
import { useCardListStore } from '@/stores/cardStore';
import { showConfirmDialog, showFailToast } from 'vant';
import { onMounted } from 'vue';

type Card = {
   cartid: string
   discount: number
   flag: boolean
   img1: string
   num: number
   originprice: number
   proid: string
   proname: string
}
const cardListStore = useCardListStore();
onMounted(async () => {
   const result = (await card()).data.data;
   cardListStore.setCardList(result as unknown as Card[])
})

//  function clear() {
//    removeAll().then(async () => {
//       cardListStore.cardList = (await card()).data.data as never;
//    })
// }
function clear() {
   if (!cardListStore.cardList.length) {
      showFailToast('本来就是空的');
   } else
      showConfirmDialog({
         title: '清空购物车',
         message:
            '清空购物车所有商品，什么也不剩哦',
      })
         .then(async () => {
            await removeAll()
            cardListStore.cardList = (await card()).data.data as never;
         })
         .catch(() => { });
}

</script>